<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>文章编辑</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->

		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- page specific plugin styles -->

		<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css" />

		<!-- fonts -->

		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>

	
		<![endif]-->

			<!-- 账户 -->
			<link rel="stylesheet" type="text/css" href="css/default.css" />
			<link rel="stylesheet" type="text/css" href="css/component.css" />
			<script src="js/modernizr.custom.js"></script>
		<!-- 账户end -->
	</head>
	<style type="text/css">
		body{
			background: white;
		}
		.touxiang{
			height:110px;
			width: 110px;
			background: red;
			position: absolute;
			z-index: 2;
			margin-left:85%;
			margin-top: -2%;
			-webkit-border-radius:110px;
            -moz-border-radius:110px;
            border-radius:110px;
		}
		.biaoti{
			height:60px;
			width: 62.5%;
			background: green;
			margin: 5% auto 0 auto;
		}
		.zhanghu{
                position:absolute;
                height:40%;
                width: 15%;
                margin-top: 0%;     
                z-index: 1000;
                margin-left: 3%;
                
            }
        a:hover{
        	text-decoration:none;
        }
	</style>

	<body>
		<div class="zhanghu">
	        <div class="container"> 
	        
	            <nav class="dr-menu">
	                <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">帐户</a></div>
	                <ul>
	                    <li><a class="dr-icon dr-icon-user" href="#">章天锋</a></li>
	                    <li><a class="dr-icon dr-icon-camera" href="#">视频</a></li>
	                    <li><a class="dr-icon dr-icon-heart" href="#">收藏夹</a></li>
	                    <li><a class="dr-icon dr-icon-bullhorn" href="#">订阅</a></li>
	                    <li><a class="dr-icon dr-icon-download" href="#">下载</a></li>
	                    <li><a class="dr-icon dr-icon-settings" href="#">设置</a></li>
	                    <li><a class="dr-icon dr-icon-switch" href="#">退出</a></li>
	                </ul>
	            </nav>
	        
	        </div><!-- /container -->
	    </div>
		<div class="touxiang">
			<img height="110" alt="" width="110" src="img/touxiang.jpg" style="-webkit-border-radius:110px; -moz-border-radius:110px;border-radius:110px;"/>
		</div>
		<div class="biaoti">
			<input type="text" style="height:60px;width:100%;border:0px solid #bbc0ca;font-size:30px;background:#F7F8FA;" placeholder="写下你的标题...">
		</div>
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<div class="wysiwyg-editor" id="editor1"></div>

								<div class="hr hr-double dotted" style="width:65%;margin:20px auto;"></div>

								<script type="text/javascript">
									var $path_assets = "assets";//this will be used in loading jQuery UI if needed!
								</script>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
		<!-- basic scripts -->

		<!--[if !IE]> -->

		

		<!-- <![endif]-->

		<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->

		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/markdown/markdown.min.js"></script>
		<script src="assets/js/markdown/bootstrap-markdown.min.js"></script>
		<script src="assets/js/jquery.hotkeys.min.js"></script>
		<script src="assets/js/bootstrap-wysiwyg.min.js"></script>
		<script src="assets/js/bootbox.min.js"></script>

		<!-- ace scripts -->

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			jQuery(function($){
	
	function showErrorAlert (reason, detail) {
		var msg='';
		if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
		else {
			console.log("error uploading file", reason, detail);
		}
		$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
		 '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
	}

	//$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

	//but we want to change a few buttons colors for the third style
	$('#editor1').ace_wysiwyg({
		toolbar:
		[
			'font',
			null,
			'fontSize',
			null,
			{name:'bold', className:'btn-info'},
			{name:'italic', className:'btn-info'},
			{name:'strikethrough', className:'btn-info'},
			{name:'underline', className:'btn-info'},
			null,
			{name:'insertunorderedlist', className:'btn-success'},
			{name:'insertorderedlist', className:'btn-success'},
			{name:'outdent', className:'btn-purple'},
			{name:'indent', className:'btn-purple'},
			null,
			{name:'justifyleft', className:'btn-primary'},
			{name:'justifycenter', className:'btn-primary'},
			{name:'justifyright', className:'btn-primary'},
			{name:'justifyfull', className:'btn-inverse'},
			null,
			{name:'createLink', className:'btn-pink'},
			{name:'unlink', className:'btn-pink'},
			null,
			{name:'insertImage', className:'btn-success'},
			null,
			'foreColor',
			null,
			{name:'undo', className:'btn-grey'},
			{name:'redo', className:'btn-grey'}
		],
		'wysiwyg': {
			fileUploadError: showErrorAlert
		}
	}).prev().addClass('wysiwyg-style1');

	

	
	$('[data-toggle="buttons"] .btn').on('click', function(e){
		var target = $(this).find('input[type=radio]');
		var which = parseInt(target.val());
		var toolbar = $('#editor1').prev().get(0);
		if(which == 1 || which == 2 || which == 3) {
			toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g , '');
			if(which == 1) $(toolbar).addClass('wysiwyg-style1');
			else if(which == 2) $(toolbar).addClass('wysiwyg-style2');
		}
	});


	

	//Add Image Resize Functionality to Chrome and Safari
	//webkit browsers don't have image resize functionality when content is editable
	//so let's add something using jQuery UI resizable
	//another option would be opening a dialog for user to enter dimensions.
	if ( typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase()) ) {
		
		var lastResizableImg = null;
		function destroyResizable() {
			if(lastResizableImg == null) return;
			lastResizableImg.resizable( "destroy" );
			lastResizableImg.removeData('resizable');
			lastResizableImg = null;
		}

		var enableImageResize = function() {
			$('.wysiwyg-editor')
			.on('mousedown', function(e) {
				var target = $(e.target);
				if( e.target instanceof HTMLImageElement ) {
					if( !target.data('resizable') ) {
						target.resizable({
							aspectRatio: e.target.width / e.target.height,
						});
						target.data('resizable', true);
						
						if( lastResizableImg != null ) {//disable previous resizable image
							lastResizableImg.resizable( "destroy" );
							lastResizableImg.removeData('resizable');
						}
						lastResizableImg = target;
					}
				}
			})
			.on('click', function(e) {
				if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
					destroyResizable();
				}
			})
			.on('keydown', function() {
				destroyResizable();
			});
	    }
		
		enableImageResize();

	}


});
		</script>
	
	<!-- 账户 -->
		<script src="js/ytmenu.js"></script>

	<!-- 账户end -->

	<!-- 头像自适应 -->
		<script type="text/javascript" >


			function ResizeImages()
			{
			   var myimg,oldwidth,oldheight;
			   var maxwidth=550;
			   var maxheight=880
			   var imgs = document.getElementById('article').getElementsByTagName('img');  

			   for(i=0;i<imgs.length;i++){
			     myimg = imgs[i];

			     if(myimg.width > myimg.height)
			     {
			         if(myimg.width > maxwidth)
			         {
			            oldwidth = myimg.width;
			            myimg.height = myimg.height * (maxwidth/oldwidth);
			            myimg.width = maxwidth;
			         }
			     }else{
			         if(myimg.height > maxheight)
			         {
			            oldheight = myimg.height;
			            myimg.width = myimg.width * (maxheight/oldheight);
			            myimg.height = maxheight;
			         }
			     }
			   }
			}
			ResizeImages();
			</script>
	<!-- 头像自适应end -->

	</body>
</html>
